<template>
  <div class="registration-flow-container fade-in">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2 class="page-title">
            <el-icon class="title-icon">
              <Document />
            </el-icon>
            报名流程管理
          </h2>
          <p class="page-subtitle">管理报名审核、缴费确认、发票生成等完整流程</p>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
          <el-button type="success" @click="batchProcess">
            <el-icon><Check /></el-icon>
            批量处理
          </el-button>
        </div>
      </div>
    </div>

    <!-- 流程状态概览 -->
    <div class="flow-overview">
      <el-row :gutter="24">
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="flow-card pending" shadow="hover">
            <div class="flow-content">
              <div class="flow-icon">
                <el-icon><Clock /></el-icon>
              </div>
              <div class="flow-info">
                <div class="flow-number">{{ pendingCount }}</div>
                <div class="flow-label">待审核</div>
                <div class="flow-desc">等待审核的报名</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="flow-card approved" shadow="hover">
            <div class="flow-content">
              <div class="flow-icon">
                <el-icon><Check /></el-icon>
              </div>
              <div class="flow-info">
                <div class="flow-number">{{ approvedCount }}</div>
                <div class="flow-label">已审核</div>
                <div class="flow-desc">审核通过待缴费</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="flow-card paid" shadow="hover">
            <div class="flow-content">
              <div class="flow-icon">
                <el-icon><Money /></el-icon>
              </div>
              <div class="flow-info">
                <div class="flow-number">{{ paidCount }}</div>
                <div class="flow-label">已缴费</div>
                <div class="flow-desc">缴费完成待开票</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="flow-card completed" shadow="hover">
            <div class="flow-content">
              <div class="flow-icon">
                <el-icon><CircleCheck /></el-icon>
              </div>
              <div class="flow-info">
                <div class="flow-number">{{ completedCount }}</div>
                <div class="flow-label">已完成</div>
                <div class="flow-desc">流程全部完成</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 流程管理标签页 -->
    <el-card class="flow-tabs-card" shadow="hover">
      <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
        <el-tab-pane label="待审核" name="pending">
          <div class="tab-content">
            <div class="tab-header">
              <h3>待审核报名 ({{ pendingRegistrations.length }})</h3>
              <div class="tab-actions">
                <el-button type="primary" size="small" @click="batchApprove">
                  <el-icon><Check /></el-icon>
                  批量通过
                </el-button>
                <el-button type="danger" size="small" @click="batchReject">
                  <el-icon><Close /></el-icon>
                  批量拒绝
                </el-button>
              </div>
            </div>
            <el-table 
              :data="pendingRegistrations" 
              style="width: 100%" 
              :stripe="true" 
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="name" label="姓名" width="120" />
              <el-table-column prop="phone" label="联系电话" width="140" />
              <el-table-column prop="competition" label="比赛项目" width="150" />
              <el-table-column prop="fee" label="报名费" width="100">
                <template #default="{ row }">
                  ¥{{ row.fee }}
                </template>
              </el-table-column>
              <el-table-column prop="submitTime" label="提交时间" width="160" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag type="warning">待审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="{ row }">
                  <el-button size="small" @click="viewDetails(row)">查看</el-button>
                  <el-button size="small" type="success" @click="approveRegistration(row)">通过</el-button>
                  <el-button size="small" type="danger" @click="rejectRegistration(row)">拒绝</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="待缴费" name="approved">
          <div class="tab-content">
            <div class="tab-header">
              <h3>待缴费报名 ({{ approvedRegistrations.length }})</h3>
              <div class="tab-actions">
                <el-button type="primary" size="small" @click="sendPaymentReminder">
                  <el-icon><Message /></el-icon>
                  发送缴费提醒
                </el-button>
              </div>
            </div>
            <el-table 
              :data="approvedRegistrations" 
              style="width: 100%" 
              :stripe="true">
              <el-table-column prop="name" label="姓名" width="120" />
              <el-table-column prop="phone" label="联系电话" width="140" />
              <el-table-column prop="competition" label="比赛项目" width="150" />
              <el-table-column prop="fee" label="报名费" width="100">
                <template #default="{ row }">
                  ¥{{ row.fee }}
                </template>
              </el-table-column>
              <el-table-column prop="approveTime" label="审核时间" width="160" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag type="success">已审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="{ row }">
                  <el-button size="small" @click="viewDetails(row)">查看</el-button>
                  <el-button size="small" type="primary" @click="confirmPayment(row)">确认缴费</el-button>
                  <el-button size="small" @click="sendReminder(row)">发送提醒</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="待开票" name="paid">
          <div class="tab-content">
            <div class="tab-header">
              <h3>待开票报名 ({{ paidRegistrations.length }})</h3>
              <div class="tab-actions">
                <el-button type="primary" size="small" @click="batchGenerateInvoice">
                  <el-icon><Document /></el-icon>
                  批量开票
                </el-button>
              </div>
            </div>
            <el-table 
              :data="paidRegistrations" 
              style="width: 100%" 
              :stripe="true"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="name" label="姓名" width="120" />
              <el-table-column prop="phone" label="联系电话" width="140" />
              <el-table-column prop="competition" label="比赛项目" width="150" />
              <el-table-column prop="fee" label="报名费" width="100">
                <template #default="{ row }">
                  ¥{{ row.fee }}
                </template>
              </el-table-column>
              <el-table-column prop="paymentTime" label="缴费时间" width="160" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag type="primary">已缴费</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="{ row }">
                  <el-button size="small" @click="viewDetails(row)">查看</el-button>
                  <el-button size="small" type="success" @click="generateInvoice(row)">开票</el-button>
                  <el-button size="small" @click="downloadReceipt(row)">下载收据</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="已完成" name="completed">
          <div class="tab-content">
            <div class="tab-header">
              <h3>已完成报名 ({{ completedRegistrations.length }})</h3>
              <div class="tab-actions">
                <el-button type="primary" size="small" @click="exportCompleted">
                  <el-icon><Download /></el-icon>
                  导出数据
                </el-button>
              </div>
            </div>
            <el-table 
              :data="completedRegistrations" 
              style="width: 100%" 
              :stripe="true">
              <el-table-column prop="name" label="姓名" width="120" />
              <el-table-column prop="phone" label="联系电话" width="140" />
              <el-table-column prop="competition" label="比赛项目" width="150" />
              <el-table-column prop="fee" label="报名费" width="100">
                <template #default="{ row }">
                  ¥{{ row.fee }}
                </template>
              </el-table-column>
              <el-table-column prop="invoiceTime" label="开票时间" width="160" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag type="success">已完成</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="{ row }">
                  <el-button size="small" @click="viewDetails(row)">查看</el-button>
                  <el-button size="small" @click="downloadInvoice(row)">下载发票</el-button>
                  <el-button size="small" @click="resendInvoice(row)">重新发送</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 详情查看对话框 -->
    <el-dialog 
      v-model="showDetailsDialog" 
      title="报名详情" 
      width="800px"
      :close-on-click-modal="false">
      <div class="details-content" v-if="selectedRegistration">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ selectedRegistration.name }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ selectedRegistration.phone }}</el-descriptions-item>
          <el-descriptions-item label="比赛项目">{{ selectedRegistration.competition }}</el-descriptions-item>
          <el-descriptions-item label="报名费">¥{{ selectedRegistration.fee }}</el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ selectedRegistration.submitTime }}</el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusType(selectedRegistration.status)">
              {{ selectedRegistration.status }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{ selectedRegistration.remark || '无' }}</el-descriptions-item>
        </el-descriptions>

        <div class="flow-timeline">
          <h4>流程时间线</h4>
          <el-timeline>
            <el-timeline-item 
              v-for="(activity, index) in selectedRegistration.timeline" 
              :key="index"
              :timestamp="activity.time"
              :type="activity.type">
              {{ activity.description }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDetailsDialog = false">关闭</el-button>
          <el-button type="primary" @click="processNextStep" v-if="canProcessNext">
            {{ getNextStepText() }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 缴费确认对话框 -->
    <el-dialog 
      v-model="showPaymentDialog" 
      title="确认缴费" 
      width="600px"
      :close-on-click-modal="false">
      <div class="payment-content" v-if="selectedRegistration">
        <el-form :model="paymentForm" label-width="120px">
          <el-form-item label="报名人">
            <span>{{ selectedRegistration.name }}</span>
          </el-form-item>
          <el-form-item label="比赛项目">
            <span>{{ selectedRegistration.competition }}</span>
          </el-form-item>
          <el-form-item label="报名费">
            <span class="fee-amount">¥{{ selectedRegistration.fee }}</span>
          </el-form-item>
          <el-form-item label="缴费方式">
            <el-select v-model="paymentForm.method" style="width: 100%">
              <el-option label="现金" value="cash" />
              <el-option label="银行转账" value="bank" />
              <el-option label="微信支付" value="wechat" />
              <el-option label="支付宝" value="alipay" />
            </el-select>
          </el-form-item>
          <el-form-item label="缴费时间">
            <el-date-picker 
              v-model="paymentForm.time" 
              type="datetime" 
              placeholder="选择缴费时间"
              style="width: 100%" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input 
              v-model="paymentForm.remark" 
              type="textarea" 
              :rows="3"
              placeholder="请输入备注信息" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showPaymentDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmPaymentSubmit">确认缴费</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 发票生成对话框 -->
    <el-dialog 
      v-model="showInvoiceDialog" 
      title="生成发票" 
      width="600px"
      :close-on-click-modal="false">
      <div class="invoice-content" v-if="selectedRegistration">
        <el-form :model="invoiceForm" label-width="120px">
          <el-form-item label="发票类型">
            <el-radio-group v-model="invoiceForm.type">
              <el-radio label="个人">个人发票</el-radio>
              <el-radio label="企业">企业发票</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发票抬头" v-if="invoiceForm.type === '个人'">
            <el-input v-model="invoiceForm.title" placeholder="请输入发票抬头" />
          </el-form-item>
          <el-form-item label="企业名称" v-if="invoiceForm.type === '企业'">
            <el-input v-model="invoiceForm.company" placeholder="请输入企业名称" />
          </el-form-item>
          <el-form-item label="税号" v-if="invoiceForm.type === '企业'">
            <el-input v-model="invoiceForm.taxNumber" placeholder="请输入纳税人识别号" />
          </el-form-item>
          <el-form-item label="发票金额">
            <span class="fee-amount">¥{{ selectedRegistration.fee }}</span>
          </el-form-item>
          <el-form-item label="发票内容">
            <el-input 
              v-model="invoiceForm.content" 
              placeholder="请输入发票内容"
              :default-value="`${selectedRegistration.competition}报名费`" />
          </el-form-item>
          <el-form-item label="接收邮箱">
            <el-input v-model="invoiceForm.email" placeholder="请输入接收发票的邮箱" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showInvoiceDialog = false">取消</el-button>
          <el-button type="primary" @click="generateInvoiceSubmit">生成发票</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { 
  Document, Refresh, Check, Clock, Money, CircleCheck, 
  Close, Message, Download
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const activeTab = ref('pending')
const showDetailsDialog = ref(false)
const showPaymentDialog = ref(false)
const showInvoiceDialog = ref(false)
const selectedRegistration = ref(null)
const selectedRows = ref([])

// 表单数据
const paymentForm = ref({
  method: 'cash',
  time: new Date(),
  remark: ''
})

const invoiceForm = ref({
  type: '个人',
  title: '',
  company: '',
  taxNumber: '',
  content: '',
  email: ''
})

// 模拟数据
const registrations = ref([
  {
    id: 1,
    name: '张三',
    phone: '13800138001',
    competition: '2024年春季马拉松',
    fee: 150,
    submitTime: '2024-01-15 10:30:00',
    approveTime: null,
    paymentTime: null,
    invoiceTime: null,
    status: 'pending',
    remark: '首次参加马拉松比赛',
    timeline: [
      { time: '2024-01-15 10:30:00', description: '提交报名申请', type: 'primary' }
    ]
  },
  {
    id: 2,
    name: '李四',
    phone: '13800138002',
    competition: '2024年春季马拉松',
    fee: 150,
    submitTime: '2024-01-15 09:15:00',
    approveTime: '2024-01-15 14:20:00',
    paymentTime: null,
    invoiceTime: null,
    status: 'approved',
    remark: '',
    timeline: [
      { time: '2024-01-15 09:15:00', description: '提交报名申请', type: 'primary' },
      { time: '2024-01-15 14:20:00', description: '审核通过', type: 'success' }
    ]
  },
  {
    id: 3,
    name: '王五',
    phone: '13800138003',
    competition: '2024年春季马拉松',
    fee: 150,
    submitTime: '2024-01-14 16:45:00',
    approveTime: '2024-01-15 10:30:00',
    paymentTime: '2024-01-15 15:30:00',
    invoiceTime: null,
    status: 'paid',
    remark: '',
    timeline: [
      { time: '2024-01-14 16:45:00', description: '提交报名申请', type: 'primary' },
      { time: '2024-01-15 10:30:00', description: '审核通过', type: 'success' },
      { time: '2024-01-15 15:30:00', description: '缴费完成', type: 'success' }
    ]
  },
  {
    id: 4,
    name: '赵六',
    phone: '13800138004',
    competition: '2024年春季马拉松',
    fee: 150,
    submitTime: '2024-01-13 11:20:00',
    approveTime: '2024-01-13 15:45:00',
    paymentTime: '2024-01-14 09:30:00',
    invoiceTime: '2024-01-14 16:20:00',
    status: 'completed',
    remark: '',
    timeline: [
      { time: '2024-01-13 11:20:00', description: '提交报名申请', type: 'primary' },
      { time: '2024-01-13 15:45:00', description: '审核通过', type: 'success' },
      { time: '2024-01-14 09:30:00', description: '缴费完成', type: 'success' },
      { time: '2024-01-14 16:20:00', description: '发票已生成', type: 'success' }
    ]
  }
])

// 计算属性
const pendingRegistrations = computed(() => 
  registrations.value.filter(r => r.status === 'pending')
)

const approvedRegistrations = computed(() => 
  registrations.value.filter(r => r.status === 'approved')
)

const paidRegistrations = computed(() => 
  registrations.value.filter(r => r.status === 'paid')
)

const completedRegistrations = computed(() => 
  registrations.value.filter(r => r.status === 'completed')
)

const pendingCount = computed(() => pendingRegistrations.value.length)
const approvedCount = computed(() => approvedRegistrations.value.length)
const paidCount = computed(() => paidRegistrations.value.length)
const completedCount = computed(() => completedRegistrations.value.length)

const canProcessNext = computed(() => {
  if (!selectedRegistration.value) return false
  return selectedRegistration.value.status === 'pending' || 
         selectedRegistration.value.status === 'approved' ||
         selectedRegistration.value.status === 'paid'
})

// 方法
const refreshData = () => {
  ElMessage.success('数据已刷新')
}

const batchProcess = () => {
  ElMessage.info('批量处理功能开发中')
}

const handleTabClick = (tab) => {
  console.log('切换到标签页:', tab.props.name)
}

const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

const viewDetails = (row) => {
  selectedRegistration.value = row
  showDetailsDialog.value = true
}

const approveRegistration = (row) => {
  ElMessageBox.confirm(
    `确定要通过 ${row.name} 的报名申请吗？`,
    '确认审核',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    row.status = 'approved'
    row.approveTime = new Date().toLocaleString()
    row.timeline.push({
      time: row.approveTime,
      description: '审核通过',
      type: 'success'
    })
    ElMessage.success('审核通过成功')
  })
}

const rejectRegistration = (row) => {
  ElMessageBox.confirm(
    `确定要拒绝 ${row.name} 的报名申请吗？`,
    '确认拒绝',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    row.status = 'rejected'
    row.timeline.push({
      time: new Date().toLocaleString(),
      description: '审核拒绝',
      type: 'danger'
    })
    ElMessage.success('已拒绝报名申请')
  })
}

const confirmPayment = (row) => {
  selectedRegistration.value = row
  paymentForm.value = {
    method: 'cash',
    time: new Date(),
    remark: ''
  }
  showPaymentDialog.value = true
}

const confirmPaymentSubmit = () => {
  const registration = selectedRegistration.value
  registration.status = 'paid'
  registration.paymentTime = paymentForm.value.time.toLocaleString()
  registration.timeline.push({
    time: registration.paymentTime,
    description: `缴费完成 (${paymentForm.value.method})`,
    type: 'success'
  })
  showPaymentDialog.value = false
  ElMessage.success('缴费确认成功')
}

const generateInvoice = (row) => {
  selectedRegistration.value = row
  invoiceForm.value = {
    type: '个人',
    title: row.name,
    company: '',
    taxNumber: '',
    content: `${row.competition}报名费`,
    email: ''
  }
  showInvoiceDialog.value = true
}

const generateInvoiceSubmit = () => {
  const registration = selectedRegistration.value
  registration.status = 'completed'
  registration.invoiceTime = new Date().toLocaleString()
  registration.timeline.push({
    time: registration.invoiceTime,
    description: '发票已生成',
    type: 'success'
  })
  showInvoiceDialog.value = false
  ElMessage.success('发票生成成功')
}

const getStatusType = (status) => {
  const types = {
    pending: 'warning',
    approved: 'success',
    paid: 'primary',
    completed: 'success',
    rejected: 'danger'
  }
  return types[status] || 'info'
}

const getNextStepText = () => {
  if (!selectedRegistration.value) return ''
  const status = selectedRegistration.value.status
  const texts = {
    pending: '审核通过',
    approved: '确认缴费',
    paid: '生成发票'
  }
  return texts[status] || ''
}

const processNextStep = () => {
  const registration = selectedRegistration.value
  if (registration.status === 'pending') {
    approveRegistration(registration)
  } else if (registration.status === 'approved') {
    confirmPayment(registration)
  } else if (registration.status === 'paid') {
    generateInvoice(registration)
  }
  showDetailsDialog.value = false
}

const batchApprove = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要审核的报名')
    return
  }
  ElMessageBox.confirm(
    `确定要批量通过 ${selectedRows.value.length} 个报名申请吗？`,
    '批量审核',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    selectedRows.value.forEach(row => {
      row.status = 'approved'
      row.approveTime = new Date().toLocaleString()
      row.timeline.push({
        time: row.approveTime,
        description: '审核通过',
        type: 'success'
      })
    })
    ElMessage.success(`批量审核通过 ${selectedRows.value.length} 个报名`)
  })
}

const batchReject = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要拒绝的报名')
    return
  }
  ElMessageBox.confirm(
    `确定要批量拒绝 ${selectedRows.value.length} 个报名申请吗？`,
    '批量拒绝',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    selectedRows.value.forEach(row => {
      row.status = 'rejected'
      row.timeline.push({
        time: new Date().toLocaleString(),
        description: '审核拒绝',
        type: 'danger'
      })
    })
    ElMessage.success(`批量拒绝 ${selectedRows.value.length} 个报名`)
  })
}

const sendPaymentReminder = () => {
  ElMessage.success('缴费提醒已发送')
}

const sendReminder = (row) => {
  ElMessage.success(`已向 ${row.name} 发送缴费提醒`)
}

const downloadReceipt = (row) => {
  ElMessage.success('收据下载成功')
}

const downloadInvoice = (row) => {
  ElMessage.success('发票下载成功')
}

const resendInvoice = (row) => {
  ElMessage.success('发票重新发送成功')
}

const batchGenerateInvoice = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要开票的报名')
    return
  }
  ElMessage.success(`批量生成 ${selectedRows.value.length} 张发票`)
}

const exportCompleted = () => {
  ElMessage.success('已完成数据导出')
}

onMounted(() => {
  console.log('报名流程管理页面已加载')
})
</script>

<style scoped>
.registration-flow-container {
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  min-height: 100vh;
}

.page-header {
  margin-bottom: var(--spacing-xl);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.title-section {
  flex: 1;
}

.page-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.title-icon {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* 流程概览 */
.flow-overview {
  margin-bottom: var(--spacing-xl);
}

.flow-card {
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.flow-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.flow-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.flow-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  transition: all 0.3s ease;
}

.flow-card.pending .flow-icon {
  background: linear-gradient(135deg, var(--warning-color), var(--warning-dark));
}

.flow-card.approved .flow-icon {
  background: linear-gradient(135deg, var(--success-color), var(--success-dark));
}

.flow-card.paid .flow-icon {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.flow-card.completed .flow-icon {
  background: linear-gradient(135deg, var(--success-color), var(--success-dark));
}

.flow-info {
  flex: 1;
}

.flow-number {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.flow-label {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.flow-desc {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* 标签页 */
.flow-tabs-card {
  border-radius: var(--radius-lg);
}

.tab-content {
  padding: var(--spacing-lg) 0;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.tab-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
}

.tab-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* 详情对话框 */
.details-content {
  padding: var(--spacing-lg) 0;
}

.flow-timeline {
  margin-top: var(--spacing-xl);
}

.flow-timeline h4 {
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
}

/* 缴费对话框 */
.payment-content {
  padding: var(--spacing-lg) 0;
}

.fee-amount {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-color);
}

/* 发票对话框 */
.invoice-content {
  padding: var(--spacing-lg) 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .registration-flow-container {
    padding: var(--spacing-md);
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .flow-content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
  }

  .flow-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  .tab-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .tab-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.5rem;
  }

  .flow-number {
    font-size: 1.25rem;
  }
}
</style>
